<template>
    <div class="tabs">
        <el-tag size="small" v-for="(v,i) in tags" :key="v.name" :closable="v.name!='home'" :effect="$route.name==v.name?'dark':'plain'" @click="changMenu(v)" @close="hanleClose(v,i)">{{v.label}}</el-tag>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
    export default {
        name:'CommonTag',
        data() {
            return {
                
            }
        },
        computed: {
            ...mapState({
                tags:state=>state.tabsList
            })
        },
        methods: {
            ...mapMutations({
                close:'closeTag'
            }),
            changMenu(v) {
                this.$router.push({name:v.name})
            },
            hanleClose(v,i){
                const length= this.tags.length-1
                this.close(v)
                if(v.name!==this.$route.name){
                    return
                }
                if(i==length){
                    this.$router.push({
                        name:this.tags[i-1].name
                    })
                }else{
                    this.$router.push({
                        name:this.tags[i].name
                    })
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
.tabs{
    padding: 20px;
    .el-tag{
        margin-right: 15px;
        cursor: pointer;
        user-select: none;
    }
}
</style>